<template>
  <div class="gnb-notes">
    <div class="">

    </div>
    <el-table
        :data="$store.state.note.notes"
    >
      <el-table-column
          prop="name"
          label="笔记本名称"
          width="140"
      ></el-table-column>
      <el-table-column
          prop="gitAddress"
          label="Git 地址"
      ></el-table-column>
      <el-table-column
          label="操作"
          width="100"
          align="center"
      >
        <template #default="{row}">
          <el-button
              type="danger"
              icon="el-icon-delete"
              @click="onClickDeleteButton(row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">

import {useStore} from "vuex";
import {getCurrentInstance} from "vue";
import {IpcRenderer} from "@/utils/render/common";

export default {
  name: 'gnb-notes',
  mixins: [],
  components: {},
  props: {},
  data() {
    return {}
  },
  setup() {

    const store = useStore();
    const instance = getCurrentInstance();

    const onClickDeleteButton = (item) => {
      instance.proxy["$confirm"](`确认删除笔记本 < ${item.name} >`, "删除确认").then( async () => {
        const res = await IpcRenderer.invoke("deleteNote", item.name);
        await store.dispatch("syncNotes");
      })
    }

    return {

      onClickDeleteButton,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {}
};
</script>

<style scoped lang="less">
.gnb-notes {

}
</style>